<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta content="IE=edge" http-equiv="X-UA-Compatible">
    <title>Sass:Syntactically Awesome Style Sheets</title>
    <meta content="Syntactically Awesome Style Sheets" name="description">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" type="text/css" href="css/main.css">
</head>
<body>
   <div class="page">
       <div class="alert stickers">
           <div class="container">
               <p>
                   <strong>Sass stands with trans detainees.</strong>
                   <a href="https://www.tfaforms.com/369889">
                      Donate to the Trans Justice Funding Project. 
                   </a>
               </p>
           </div>
       </div>
       <div class="pop-stripe"></div>
       <header class="banner" role="banner">
           <div class="container">
               <h1 class="site-brand">
                   <a href="http://www.zhuchuli.cn:4000/hexo-theme-huxblog/">
                      <img height="48" src="images/logo-b6e1ef6e.svg" alt="Sass">
                   </a>
               </h1>
               <nav class="navigation collapse" role="navigation">
                    <ul>
                        <li><a href="./install.html">Install</a></li>
                        <li><a href="./guide.html">Learn Sass</a></li>
                        <li><a href="./blog.html">Blog</a></li>
                        <li><a href="./documentation.html">Documentation</a></li>
                        <li><a href="./community.html">Get Involved</a></li>
                        <li><a href="./libsass.html">libSass</a></li>
                    </ul>
               </nav>
               <div class="banner-toggle">
                   <button data-target=".navigation" data-toggle="collapse" type="button">
                       <span class="icon-bar"></span>
                       <span class="icon-bar"></span>
                       <span class="icon-bar"></span>
                   </button>
               </div> 

           </div>
       </header>
       <div class="page-header">
           <div class="container">
               <h1> Sass Blog </h1>
           </div>
       </div>
       <div class="body blog">
          <div class="container">
                <div class="body blog">
                    
                        <p>Page 1 of&nbsp;6</p> 
                        <p></p> 
                        <h2><a href="blog/libsass-is-deprecated">LibSass is&nbsp;Deprecated</a></h2> 
                        <p class="sl-c-attribution">Posted 26 October 2020 by Natalie&nbsp;Weizenbaum</p> 
                        <p>After much discussion among the Sass core team, we’ve come to the&nbsp;conclusion that it’s time to officially declare that LibSass and the packages built on&nbsp;top of it, including Node Sass, are deprecated. For several years now, it’s&nbsp;been clear that there’s simply not enough engineering bandwidth behind LibSass&nbsp;to keep it up-to-date with the latest developments in the Sass language&nbsp;(for example, the most recent new language feature was added in <a href="https://github.com/sass/libsass/releases/tag/3.5.5">November 2018</a>).&nbsp;As much as we’ve hoped to see this pattern turn around, even the excellent work&nbsp;of long-time LibSass contributors Michael Mifsud and Marcel Greter couldn’t keep&nbsp;up with the fast pace of language development in both <span class="caps">CSS</span> and&nbsp;Sass.</p> <p>I’ll go into detail about what this means below, but here are the major&nbsp;points:</p> 
                        <ul> 
                            <li><p>We no longer recommend LibSass for new Sass projects. Use <a href="https://sass-lang.com/dart-sass">Dart Sass</a>&nbsp;instead.</p></li> 
                            <li><p>We recommend all existing LibSass users make plans to eventually move&nbsp;onto Dart Sass, and that all Sass libraries make plans to eventually drop&nbsp;support…</p></li> 
                        </ul> 
                        <h2><a href="blog/request-for-comments-hwb-functions">Request for Comments: <span class="caps">HWB</span>&nbsp;Functions</a></h2> 
                        <p class="sl-c-attribution">Posted 7 October 2020 by Natalie&nbsp;Weizenbaum</p> 
                        <p>The <span class="caps">CSS</span> working group has been up to all sorts of exciting stuff recently in&nbsp;the <a href="https://www.w3.org/TR/css-color-4/">Color Level 4</a> spec, and the Sass team is starting to think about how&nbsp;to integrate those cool new features into Sass’s color model. We need more time&nbsp;to hammer out exactly the right designs for complex features like the Lab&nbsp;color space, but that doesn’t mean we can’t add a few new color&nbsp;goodies.</p> 
                        <p>Today we’re announcing a proposal for one such feature: built-in Sass&nbsp;functions for <a href="https://www.w3.org/TR/css-color-4/#the-hwb-notation"><span class="caps">HWB</span></a> colors! Once this proposal (drafted by Sass core team member <a href="https://www.miriamsuzanne.com/">Miriam Suzanne</a>) is accepted and implemented, you’ll be able to write colors in&nbsp;<span class="caps">HWB</span> syntax and adjust their whiteness and blackness the same way you can adjust&nbsp;a color’s saturation and lightness&nbsp;today.</p> 
                        
                        <h2><a href="blog/request-for-comments-nested-map-functions">Request for Comments: Nested Map&nbsp;Functions</a></h2> 
                        <p class="sl-c-attribution">Posted 16 September 2020 by Natalie&nbsp;Weizenbaum</p> 
                        <p>As Sass libraries and design systems get more complex and have more users&nbsp;with different needs, they tend to develop the need to share and&nbsp;override configuration and design tokens. This configuration is often hierarchical,&nbsp;and ends up being represented as maps that contain maps that contain still&nbsp;more maps. Up until now, Sass’s map functions haven’t really made it easy to&nbsp;work with this sort of nested map structure. But that’s changing with the&nbsp;latest language proposal, written by Sass core team member <a href="https://www.miriamsuzanne.com/">Miriam Suzanne</a>.</p> 
                        <p>This proposal expands the existing map functions and adds a few new ones to&nbsp;make working with nested maps much easier than it was before. It’s based on&nbsp;helper functions that pop up in all sorts of Sass projects around the&nbsp;web, incorporating best practices back into the language&nbsp;itself.</p> 

                        <h2><a href="blog/the-module-system-is-launched">The Module System is&nbsp;Launched</a></h2> 
                        <p class="sl-c-attribution">Posted 2 October 2019 by Natalie&nbsp;Weizenbaum</p> 
                        <p>The Sass team has known for years that the <code>@import</code> rule, one of the&nbsp;earliest additions to Sass, wasn’t as good as we wanted it. It caused a litany&nbsp;of problems for our&nbsp;users:</p> 
                        <ul> 
                            <li><p>It was next to impossible to figure out where a given variable, mixin,&nbsp;or function (collectively called “members”) was originally defined,&nbsp;since anything defined in one stylesheet was available to all stylesheets that&nbsp;were imported after&nbsp;it.</p></li> 
                            <li><p>Even if you chose to explicitly import every stylesheet that defined&nbsp;members you used, you’d end up with duplicate <span class="caps">CSS</span> and strange side-effects,&nbsp;because stylesheets were reloaded from scratch every time they were&nbsp;imported.</p></li> 
                            <li><p>It wasn’t safe to use terse and simple names because there was always&nbsp;a possibility that some other stylesheet elsewhere in your application would&nbsp;use the same name and mess up your logic. To be safe users had to manually&nbsp;add long, awkward namespaces to everything they&nbsp;defined.</p></li> 
                            <li><p>Library authors had no way to ensure that their private helpers wouldn’t&nbsp;be accessed…</p></li> 
                        </ul> 
                        <h2><a href="blog/module-system-preview">Module System&nbsp;Preview</a></h2> 
                        <p class="sl-c-attribution">Posted 4 September 2019 by Natalie&nbsp;Weizenbaum</p> 
                        <p>Exciting news, Sass fans! After a year of development and some iteration on&nbsp;the spec, we’re ready to launch a beta preview of the new Sass module system! We&nbsp;may still make a few last-minute tweaks based on user feedback, so don’t go&nbsp;using itin production just yet, but please do take this opportunity to play&nbsp;around with it and let us know what you&nbsp;think.</p> 
                        <h2 id="installing-the-preview"> <a class="anchor" href="#installing-the-preview"><span class="visuallyhidden"> Installing the Preview</span></a> </h2> 
                        <p>The preview release is available on all the normal distribution channels&nbsp;as version <code>1.23.0-module.beta.1</code>. You can download it from the <a href="https://github.com/sass/dart-sass/releases/tag/1.23.0-module.beta.1">GitHub&nbsp;release page</a>,&nbsp;or install it using one of the following commands (depending on your&nbsp;preferred installation&nbsp;channel):</p> 
                        <pre class="highlight plaintext">
<code>
    $ npm install --save-dev sass@1.23.0-module.beta.1

    $ npm install -g sass@1.23.0-module.beta.1

    $ brew install sass/sass/sass@1.23.0-module.beta.1

    $ choco install sass --version 1.23.0.modulebeta-1

    $ pub global activate sass 1.23.0-module.beta.1
</code>
                        </pre> 
                        <p>Note that <span class="caps">1.23.0</span> may not <em>actually</em> be the final version number for the&nbsp;stable…</p> 
                        <p><a href="blog/page/2">Next&nbsp;page</a></p> 
                   
                </div>
          </div>
       </div>
       <div class="alert release">
            <div class="container">
                <ul>
                    <li>Current Release：<span class="release-name">Select Steve（3.4.17）</span></li>
                    <li><a href="documentation/file.SASS_CHANGELOG.html">Release Notes</a></li>
                    <li><a href="https://github.com/sass/sass">Fork on Github</a></li>
                </ul>
            </div>
       </div>
      
   </div>
   <footer class="contentinfo" role="contentinfo">
        <nav class="container">
            <ul>
                <li class="contentinfo-legal">
                    <p>
                        Sass © 2006–2020  
                        <a href="http://www.hamptoncatlin.com/">Hampton Catlin</a>,
                        <a href="http://next-3.cpm">Natalie Weizenbaum</a>,
                        <a href="http://chriseppstein.github.io/">Chris&nbsp;Eppstein</a>,
                        and&nbsp;numerous&nbsp;contributors.
                    </p>
                    <p>
                        It is available for use and modification under the 
                        <a href="http://sass-lang.com/docs/yardoc/file.MIT-LICENSE.html">MIT&nbsp;License</a>.
                    </p>
                </li>
                <li class="contentinfo-tools">
                    <ul>
                        <li><a href="https://github.com/sass/sass">Sass Repo</a></li>
                        <li><a href="https://github.com/sass/sass-site">Website Repo</a></li>
                        <li><a href="/styleguide">Style Guide</a></li>
                        <li><a href="/community-guidelines">Community Guidelines</a></li>
                        <li><a href="https://gitee.com/chu_li_zhu">Gitee</a></li>
                    </ul>
                </li>
                <li class="contentinfo-social">
                    <a class="twitter-follow-button"  data-show-count="false" data-size="large" href="https://twitter.com/SassCSS">Follow @SassCSS</a>
                </li>
            </ul>
        </nav>
   </footer>
</body>
</html>